@import "../helpers/helper";
.rui-dialog{
  position: fixed;
  background: white;
  min-width: 16em;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
  border-radius: 16px;
  &-mask{
    position: fixed;top: 0; left: 0; width: 100%; height: 100%;
    background:fade_out(black,0.5);
    z-index: 998;
  }
  &-header{
    font-size: 22px;
    padding: 5px;
    display:flex;
    justify-content: center;
  }
  &-main{
    line-height: 1.5em;
    min-height: 6em;
    max-width: 20em;
    overflow-wrap: break-word;
    padding: 1em;
    box-shadow:inset 0 0 2px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .div-input {
      display: block;
      input{
        height: 2em;
        border-radius: 4px;
        border:1px solid $re-blue ;
        min-width: 20em;
        padding: 0 10px;
      }
    }

  }
  &-footer{
    display: flex;
    justify-content: flex-end;
    padding: 4px 0;
    align-items: center;

    button{
      white-space: nowrap;
      margin-right:10px;
    }
    button:first-child{
      background-color: $re-blue;
      color: white;
    }
    button:last-child{
      background-color: red;
      color: white;
    }
  }
  &-close{
    position: absolute;
    bottom:100%;
    left: 100%;
    background-color: #bbb;
    height: 2em;
    width: 2em;
    border-radius: 50%;
    transform: translate(-40%,40%);
    color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}